<template>
  <div>
    <!-- 要转成pdf导出的html, id为resultsHuiZongTableId-->
    <div class='student-info' id='resultsHuiZongTableId'>
      <div class='duan'>
        <div class="contract">
          <h3>❆VE❆个人博客合同模板</h3>
          <p>甲方: <span>❆VE❆</span></p>
          <p>乙方: <span>乙方名字在这</span></p>
          <p>
            合同内容合同内容合同内容，合同内容合同内容，合同内容合同内容，合同内容合同内容合同内容<span>合同内容合同内容</span> 合同内容合同内容合同内容合同内容
            合同内容合同内容合同内容合同内容合同内容合同<span>合同内容合同内容</span>内容合同内容合同内容合同内容合同内容合同内容合同内容合同内容合同内容合同内容合同内容合同内容合同内
            容合同内容合同内容合同内容合同内容合同内<span>合同内容合同内容</span>容合同内容合同内容合同内容合同内容合同内容合同内容合同内容合同内容合同内容合同内容合同内容合同内容合同
            内容合同内容合同内容合同内容合同内容合同内容合同内容合同内容合同内容合同内容合同内容合同内容合同内容合同内容合同内容合同内容合同内容合同内容合’
            同内容合同内容合同内容合同内容合同内容合同内容合同内容合同内容合同内容合同内容合同内容合同内容合同内容合同内容合同内容合同内容合同内容合同内容
          </p>
          <p>甲方地址: <span>江苏省……市……区……</span></p>
          <p>乙方地址：<span>乙方地址在这</span></p>
          <p>时间:<span>2023.09.21</span></p>
          <!-- 图片自己制作哦！！ -->
          <div class="sign">
            <div>
              <span>甲方签字：</span>
              <!-- <img src="../assets/sign.png" alt="图片签名"> -->
            </div>
            <div><span>乙方签字：</span><span>这里是乙方签字</span></div>
          </div>
          <div class="signature">
            <!-- <img src="../assets/signature.png" alt="签章图片"> -->
          </div>
        </div>
      </div>
      <div class='duan'>
        <div class='student-info-item'>姓名：王五</div>
        <div class='student-info-item'>年龄：28</div>
        <div class='student-info-item'>高校：华水</div>
        <div class='student-info-item'>班级：6班</div>
        <div><img src='../assets/logo.png' alt='' /></div>
      </div>
      <div class='duan'>
        <div id='mountNode'></div>
      </div>
      <div class='duan'>
        <div class="page_re">
          <div class='student-info-item'>姓名：王五</div>
          <div class='student-info-item'>年龄：28</div>
          <div class='student-info-item'>高校：华水</div>
          <div class='student-info-item'>班级：6班</div>
          <div><img src='../assets/logo.png' alt='' /></div>
        </div>
        <div class="page_re">
          <div class='student-info-item'>姓名：王五</div>
          <div class='student-info-item'>年龄：28</div>
          <div class='student-info-item'>高校：华水</div>
          <div class='student-info-item'>班级：6班</div>
          <div><img src='../assets/logo.png' alt='' /></div>
        </div>
        <div class="page_re">
          <div class='student-info-item'>姓名：王五</div>
          <div class='student-info-item'>年龄：28</div>
          <div class='student-info-item'>高校：华水</div>
          <div class='student-info-item'>班级：6班</div>
          <div><img src='../assets/logo.png' alt='' /></div>
        </div>
        <div class="page_re">
          <div class='student-info-item'>姓名：王五</div>
          <div class='student-info-item'>年龄：28</div>
          <div class='student-info-item'>高校：华水</div>
          <div class='student-info-item'>班级：6班</div>
          <div><img src='../assets/logo.png' alt='' /></div>
        </div>
        <div class="page_re">
          <div class='student-info-item'>姓名：王五</div>
          <div class='student-info-item'>年龄：28</div>
          <div class='student-info-item'>高校：华水</div>
          <div class='student-info-item'>班级：6班</div>
          <div><img src='../assets/logo.png' alt='' /></div>
        </div>
      </div>
    </div>

    <button type='primary' @click='getPdf(`文档`)'>导出</button>
  </div>
</template>

<script>
import JSZip from 'jszip'
import FileSaver from 'file-saver'
import G6 from '@antv/g6'
import { downloadPDF } from '@/utils/pdf' // 引入封装的pdf.js文件
const A4_WIDTH = 595.28 // a4纸宽度
const A4_HEIGHT = 841.89 // a4纸高度
const MARGIN_TOP = '50px' // 第一个盒子距离顶部的高度

export default {
  name: 'PdfView',
  data () {
    return {

    }
  },
  mounted () {
    this.initG6()
  },
  methods: {
    initG6 () {
      const data = {
        nodes: [{ // 点的数据
          id: 'node0',
          x: 100, // 节点x轴位置
          y: 400, // 节点y轴位置
          size: 60, // 图形尺寸
          type: 'circle', // 节点的形状
          label: 'circle圆形'// 节点内的文本名称
        },
        { // 点的数据
          id: 'node1',
          x: 100, // 节点x轴位置
          y: 100, // 节点y轴位置
          size: 60, // 图形尺寸
          type: 'circle', // 节点的形状
          label: 'circle圆形'// 节点内的文本名称
        },
        {
          id: 'node2',
          x: 220,
          y: 100,
          size: [90, 50], // 节点的长宽值
          type: 'rect',
          label: 'rect矩形'
        },
        {
          id: 'node3',
          x: 350,
          y: 100,
          size: [80, 40],
          type: 'ellipse',
          label: 'ellipse椭圆',
          labelCfg: {
            position: 'bottom',
            offset: 5
          },
          style: {
            fill: '#fa8c16',
            stroke: '#000',
            lineWidth: 2
          }
        },
        {
          id: 'node4',
          x: 460,
          y: 100,
          size: [100, 80],
          type: 'diamond',
          label: 'diamond菱形'
        },
        {
          id: 'node5',
          x: 600,
          y: 100,
          type: 'triangle',
          label: 'triangle三角形',
          labelCfg: {
            position: 'right',
            offset: 5
          }
        },
        {
          id: 'node6',
          x: 220,
          y: 210,
          size: 65,
          type: 'star',
          label: 'star五角星'
        },
        {
          id: 'node7',
          x: 350,
          y: 220,
          size: 60,
          type: 'image',
          img: 'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg',
          label: 'image自定义图片'
        },
        {
          id: 'node8',
          x: 550,
          y: 220,
          description: '描述文本xxxxxxxxxxx',
          type: 'modelRect',
          label: 'modelRect文本描述'
        }],
        edges: [{
          source: 'node0',
          target: 'node6'
        },
        {
          source: 'node1',
          target: 'node2'
        },
        {
          source: 'node2',
          target: 'node3'
        },
        {
          source: 'node1',
          target: 'node3'
        },
        {
          source: 'node3',
          target: 'node4'
        },
        {
          source: 'node4',
          target: 'node5'
        },
        {
          source: 'node1',
          target: 'node6'
        },
        {
          source: 'node1',
          target: 'node7'
        },
        {
          source: 'node6',
          target: 'node7'
        },
        {
          source: 'node7',
          target: 'node8'
        },
        {
          source: 'node8',
          target: 'node5'
        }]
      }
      const graph = new G6.Graph({
        container: 'mountNode',
        width: 1000,
        height: window.innerHeight,
        modes: {
          // default: ['drag-canvas', 'zoom-canvas', 'drag-node'] // 允许拖拽画布、放缩画布、拖拽节点
          default: ['drag-canvas', 'drag-node'] // 允许拖拽画布、拖拽节点
        },
        fitView: true,
        defaultEdge: {
          shape: 'quadratic',
          style: {
            endArrow: true,
            lineWidth: 2,
            stroke: '#666'
          }
        }
      })
      graph.data(data)
      graph.render()
    },
    // 处理页面分页问题
    deal (dom) {
      const list = document.querySelectorAll('.page_re') // 获取每一个page_re盒子
      /*
        备注：
          要对每一个转成pdf可分割不可分割去元素添加page_re的类标签,
        目的：
          为了计算转成pdf后的距离处理
        缺点：写样式时需要自己留意哪些盒子需要加一个类标签，从而计算高度时是一个独立的盒子
      */
      let margin = 0 // 计算每一页 最后一个容器距离底部的距离
      let pdHeight = 0 // 容器高度的累加值
      const pageHeight = A4_HEIGHT / A4_WIDTH * dom.offsetWidth// 设置a4纸转成html时的的高度，从而计算html转图片后放入a4纸时的格式
      list[0].style.marginTop = MARGIN_TOP // 给第一个盒子一个高度
      // i 从1开始， 0 为 封面---->我写的内容没有封面，从第一个盒子开始计算高度
      for (let i = 0; i < list.length; i++) {
        const height = parseFloat(window.getComputedStyle(list[i]).height) // 每一个page_re盒子的高度
        console.log('有高度么', height, pageHeight)
        pdHeight += height // 累加每个容器的高度
        // 当容器的高度累加大于pdf一页的高度时，说明这个容器需要放到下一页。
        if (pdHeight > pageHeight) {
          margin = height - (pdHeight - pageHeight) // 计算距离下一页的高度 当前容器的高度减去超出当前pdf页的高度就是当前容器移动到下一页需要的距离
          list[i].style.marginTop = margin + 'px' // 下一页的第一个盒子距离上一页的高度
          i -= 1 // list[i] 表示当前容器应显示在下一页，所以当下一页计算容器高度累加时应加上list[i]的高度， 这里感觉用while比for好一些
          pdHeight = 10 // 进入下一页重新计算累加高度，这里每个page_re
          // 元素下的第一个子元素都会有10px的paddingTop，所以初始高度为10 这里也可以动态获取
        }
      }
    },
    /**
      * 触发下载
    */
    async getPdf (title) {
      const promises = []
      const $el = document.querySelectorAll('.duan')
      for (let i = 0; i < $el.length; i++) {
        this.deal($el[i])
        const PDFres = await downloadPDF($el[i], `${title}-${i}`, A4_WIDTH, A4_HEIGHT)
        promises.push(PDFres)
        // const loading = this.$loading({
        //   lock: true,
        //   text: 'loading...',
        //   spinner: 'el-icon-loading',
        //   background: 'rgba(0, 0, 0, 0.7)'
        // })
        // // 动态提示需要等待生成文件
        // loading.setText(`正在生成第${i + 1}/${this.$el.length}文件`)
        if (i === $el.length - 1) {
          this.zipChange(promises)
          // loading.close()
        }
      }
    },
    /**
      *生成zip
    */
    zipChange (promises) {
      Promise.all(promises).then(async (pdfs) => {
        const zip = new JSZip()
        promises.forEach(async (item, index) => {
          const { PDF, name } = item
          if (promises.length === 1) {
            PDF.save(`${name}.pdf`)
          } else {
            await zip.file(`${name}.pdf`, PDF.output('blob'))
          }
        })
        if (promises.length > 1) {
          zip.generateAsync({ type: 'blob' }).then((content) => {
            FileSaver.saveAs(content, '内容' + '.zip')
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.duan {
  width: 1000px;
  height: 800;
  padding: 40px 20px 0 20px;
  margin: auto;

  page-break-after: always;
}
table{
  width: 800px;

  tr {
    height: 100px;
    display: flex;
    justify-content: start;
    align-content: center;
    th{
      width: 300px;
      &:nth-child(1){
        width: 200px;
      }
    }
    td{
      width: 300px;
    }
    .td{
      width: 200px !important;
    }
  }
}
.contract {
  position: relative;
  margin: 0 auto;
  text-align: left;
  height: 850px;
  width: 500px;
  h3{
    text-align: center;
  }
  p {
    line-height: 32px;
    span {
      display: inline-block;
      width: 300px;
      border-bottom: 1px solid #000;
      color: red;
      padding-left: 10px;
    }
  }
  .sign{
    width: 100%;
    height: 150px;
    line-height: 60px;
    display: flex;
    div{
      width: 50%;
      display: flex;
      justify-content: start;
      align-items: center;
      img{
        width: 150px;
        height: 50px;
      }
      &:last-child{
        span{
          &:last-child{
            display: inline-block;
            width: 150px;
            height: 30px;
            line-height: 30px;
            border-bottom: 1px solid #000;
          }
        }
      }
    }
  }
  .signature{
    width: 200px;
    height: 200px;
    position: absolute;
    left: 20px;
    bottom: 30px;
    opacity: .9;
    img{
      width: 100%;
      height: 100%;
    }
  }
}
</style>
